import React from "react";
import { Page } from 'react-weui'
import {getRecordsByIdAction, updateRecordStaticByIdAction} from "../../actions/recordAction";
import {NavComponent} from "../../components/navgation/NavComponent";
import './detail.scss';
import {ContactComponent} from "../../components/contact/ContactComponent";
import {
    Footer,
    FooterText,
} from 'react-weui';
import {CONST} from "../../base/constant";

export class DetailView extends React.Component{

    constructor(props){

        super(props);

        this.state = {
            record : {},
            imgBeforeArr:[],
            imgAfterArr:[]
        }

    }


    componentDidMount(){

        this.getDetail()

    }

    zanIt(){

        const recordId = this.props.match.params.recordId;

        updateRecordStaticByIdAction({id:recordId,recommendCount:++this.state.record.recommendCount}).then(function (res) {
            if(res.id){
                layer.open({content:'感谢您的点赞^ ^',skin:'msg',time:2});
            }
        })

    }
    addView() {

        const recordId = this.props.match.params.recordId;

        updateRecordStaticByIdAction({id: recordId, viewCount: ++this.state.record.viewCount})
    }



    getDetail(){

        const that = this;

        const recordId = this.props.match.params.recordId;

        getRecordsByIdAction(recordId).then(function (res) {

            res.imgBefore = res.imgBefore || '';
            res.imgAfter = res.imgAfter || '';

            that.setState({imgBeforeArr : res.imgBefore.split(',')});
            that.setState({imgAfterArr : res.imgAfter.split(',')});

            that.setState({record:res});

            that.addView();

        })

    }

    render(){

        return <Page infiniteLoader={false} transition={true} className="detail">

            <NavComponent title="详情" history={this.props.history}/>

            <div className="area title">
                <h2>{this.state.record.title}</h2>
                <p>{this.state.record.brief}</p>
            </div>
            <div className="area">
                {
                    this.state.imgBeforeArr.map(function (value,index) {
                        return <div key={index} className="img-group">
                            <img src={CONST.IMG_DOMAIN + '/' + this.state.imgBeforeArr[index]} />
                            <img src={CONST.IMG_DOMAIN + '/' + this.state.imgAfterArr[index]} />
                        </div>
                    },this)
                }
            </div>
            <div className="area">
                <p>{this.state.record.description}</p>
            </div>

            <div className="area zan">
                觉得不错？给我点赞！
                    <span onClick={this.zanIt.bind(this)}>
                        <svg className="icon" aria-hidden="true">
                            <use xlinkHref="#icon-dianzan" />
                        </svg>
                    </span>
            </div>

            <ContactComponent/>

            <div className="footer">
                <Footer>
                    <FooterText>Copyright &copy; 2018 飞哥工作室</FooterText>
                </Footer>
            </div>

        </Page>

    }

}